<!--奢侈品订单-->
<template>

  <div id="customerSearchList" class="container-fluid">

    
  <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">查询条件</h3>
      </div>
      <div class="panel-body">
         <el-form class="demo-form-inline" inline="true" >

          <el-form-item label="手机号码">
            <el-input  placeholder="手机号码" v-model="form.phone" ></el-input>
          </el-form-item>
          
       
          <el-form-item label="注册时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                align="right"
                placeholder="选择日期范围"
                :picker-options="pickerOptions2">
              </el-date-picker> 
          </el-form-item>

          </el-form-item><el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>


        </el-form>
        <div class="panel-body">

          <el-tag v-if="!!form.storeId" :key="form.storeIdName" :closable="true" type="gray"  @close="handleClose(tag)">
            {{form.storeIdName}}
          </el-tag>

        </div>

      </div>
    </div>

     <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">排序</h3>
      </div>
      <div class="panel-body">
        
      </div>
    </div>


    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">查询结果</h3>



      </div>
      <div class="panel-body">
          

        <table class="table table-striped table table-bordered table-condensed">
        
        <thead>
          <tr>
            <th>手机号</th>
            <th>性别</th>
            <th>积分</th>
            <th>可用金币</th>
            <th>昵称</th>
            <th>注册时间</th>
            <th>会员状态</th>
            <th>等级</th>
            <th>头像</th>
            <th>序号</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          
          <tr v-for=" customer in listData ">

              <td>
                  {{ customer.phone }}  
              </td>

              <td>
                  {{ customer.sex | sex }}  
              </td>
              <td>
                  {{ customer.point }}  
              </td>
              <td>
                  {{ customer.coin }}  
              </td>
              <td>
                  {{ customer.nick_name }}  
              </td>

               <td>
                  {{ customer.input_on }}  
              </td>
              <td>
                  {{ customer.delete_status | customerStatus}}  
              </td>
              <td>
                  {{ customer.customer_level | customerLevel}}  
              </td>
              <td>
                
                <img v-if="!!customer.head_image_url" :src="customer.head_image_url | imgurl" width="100px"
                 height="80px">
              </td>
              <td>
                  {{ customer.uuid }}  
              </td>

              <td>
                  <el-button type="info" size="mini">查看详情</el-button>
              </td>
          </tr>   


        </tbody>

      </table>

       <div class="block">
       
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.form.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalSize">
        </el-pagination>
      </div>
      </div>
    </div>

  </div>

    
</template>

<script>
  import axios from 'axios'

  export default{
    data () {
      return {
          listData: [],
          form:{
            phone:'',
            pageNum: 1,
            pageSize: 10,
            startTime:'',
            endTime:'',
          },
          page:{
            totalSize: 0,
            totalPage: ''
          },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        time:''
      }
    },
    mounted (){
      this.getorderList();
    },
    methods: {
      getorderList (){
        let param=this.form;
        if(!!!param.phone)
            delete param.phone;
        if(!!!this.time){
          delete param.startTime;
          delete param.endTime;
        }else{
          param.startTime=this.time[0].Format("yyyy-MM-dd");
          param.endTime=this.time[1].Format("yyyy-MM-dd");
        }
        axios.post("/api/customerInfo/queryCustomerList",param).then((res) => {
            this.listData=res.data.data.customerInfo;
            this.page.totalSize=res.data.data.totalSize;
            this.page.totalPage=res.data.data.totalPage;
        });
      },
      //查询按钮
      onSubmit (){
        this.getorderList();
      },
      //分页
      handleCurrentChange(pageNum){
        this.form.pageNum=pageNum;
        this.getorderList();
      },
      //页码
      handleSizeChange(pageSize){
        this.form.pageSize=pageSize;
        this.getorderList();
      }
    }
  }
  
</script>

<style lang="less" scoped>
<style>

